<template>
  <div>
    <!-- 页面头部 -->
    <header class="main-header">

      <!-- Logo -->
      <router-link class="logo" to="/main/frontData">
      <!--<a class="logo" href="/index/frontData">-->
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><b>仓储</b></span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>Depot仓储</b>管理系统</span>
      <!--</a>-->
      </router-link>


      <!-- Header Navbar: style can be found in header.less -->
      <nav class="navbar navbar-static-top">
        <!-- Sidebar toggle button-->
        <a class="sidebar-toggle" data-toggle="offcanvas" href="#" role="button">
          <span class="sr-only">Toggle navigation</span>
        </a>

        <div class="navbar-custom-menu">
          <ul class="nav navbar-nav">
            <!-- User Account: style can be found in dropdown.less -->
            <li class="dropdown user user-menu">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <img alt="User Image" class="user-image" src="../../../public/img/user2-160x160.jpg">
                <span class="hidden-xs">{{ username }}</span>
              </a>
              <ul class="dropdown-menu">
                <!-- User image -->
                <li class="user-header">
                  <img alt="User Image" class="img-circle" src="../../../public/img/user2-160x160.jpg">

                  <p>{{ username }}</p>
                  <div style="color:#ffffff"><small>登陆时间：</small> <small>{{ loginDateTime }}</small>
                  </div>

                </li>
                <!-- Menu Body
        <li class="user-body">
            <div class="row">
                <div class="col-xs-4 text-center">
                    <a href="#">Followers</a>
                </div>
                <div class="col-xs-4 text-center">
                    <a href="#">Sales</a>
                </div>
                <div class="col-xs-4 text-center">
                    <a href="#">Friends</a>
                </div>
            </div>
        </li>-->
                <!-- Menu Footer-->
                <li class="user-footer">
                  <div class="pull-left">
                    <router-link class="btn btn-default btn-flat" to="/main/changePassword">修改密码</router-link>
                  </div>
                  <div class="pull-right">
                    <a class="btn btn-default btn-flat" @click="logout">注销</a>
                  </div>
                </li>
              </ul>
            </li>

          </ul>
        </div>
      </nav>
    </header>
    <!-- 页面头部 /-->

    <!-- 导航侧栏 -->
    <aside class="main-sidebar">
      <!-- sidebar: style can be found in sidebar.less -->
      <section class="sidebar">
        <!-- Sidebar user panel -->
        <div class="user-panel">
          <div class="pull-left image">
            <img alt="User Image" class="img-circle" src="../../../public/img/user2-160x160.jpg">
          </div>
          <div class="pull-left info">
            <p>{{ username }}</p>
            <a href="#"><i class="fa fa-circle text-success">实例1</i>已登录</a>
          </div>
        </div>
        <!-- search form -->
        <!--<form action="#" method="get" class="sidebar-form">
    <div class="input-group">
        <input type="text" name="q" class="form-control" placeholder="搜索...">
        <span class="input-group-btn">
        <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
        </button>
      </span>
    </div>
  </form>-->
        <!-- /.search form -->


        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu">
          <li class="header">菜单</li>

          <li id="admin-index" :class="{'active': this.$route.path==='/main/frontData'}">
            <router-link to="/main/frontData">
              <i class="fa fa-dashboard"></i>
              <span>首页</span>
            </router-link>
          </li>

          <!-- 菜单 -->


          <li class="treeview" :class="{'active': this.$route.type==='product'}">
            <a href="#">
              <i class="fa fa-archive"></i> <span>商品管理</span>
              <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
            </a>
            <ul class="treeview-menu">

              <li id="product-data" :class="{'active': this.$route.path==='/main/productData'}">
                <router-link to="/main/productData">
                  <i class="fa fa-circle-o"></i> 商品详情
                </router-link>
              </li>

              <li id="product-add" :class="{'active': this.$route.path==='/main/addProduct'}">
                <router-link to="/main/addProduct">
                  <i class="fa fa-circle-o"></i> 添加商品
                </router-link>
              </li>
            </ul>
          </li>

          <li class="treeview" :class="{'active': this.$route.type==='order'}">
            <a href="#">
              <i class="fa fa-calendar-minus-o"></i> <span>订单管理</span>
              <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
            </a>
            <ul class="treeview-menu">

              <li id="order-data" :class="{'active': this.$route.path==='/main/orderData'}">
                <router-link to="/main/orderData">
                  <i class="fa fa-circle-o"></i> 订单详情
                </router-link>
              </li>

              <li id="order-add" :class="{'active': this.$route.path==='/main/addOrder'}">
                <router-link to="/main/addOrder">
                  <i class="fa fa-circle-o"></i> 添加订单
                </router-link>
              </li>

              <li id="order-pending" :class="{'active': this.$route.path==='/main/pendingOrderData'}">
                <router-link to="/main/pendingOrderData">
                  <i class="fa fa-circle-o"></i> 待处理订单
                </router-link>
              </li>

              <li id="order-picking" :class="{'active': this.$route.path==='/main/myPickingOrderData'}">
                <router-link to="/main/myPickingOrderData">
                  <i class="fa fa-circle-o"></i> 我的拣货中订单
                </router-link>
              </li>

              <li id="order-wait-deliver" :class="{'active': this.$route.path==='/main/myWaitDeliverOrderData'}">
                <router-link to="/main/myWaitDeliverOrderData">
                  <i class="fa fa-circle-o"></i> 我的待发货订单
                </router-link>
              </li>
            </ul>
          </li>

          <li class="treeview" :class="{'active': this.$route.type==='rack'}">
            <a href="#">
              <i class="fa fa-university"></i> <span>货架管理</span>
              <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
            </a>
            <ul class="treeview-menu">

              <li id="rack-data" :class="{'active': this.$route.path==='/main/rackData'}">
                <router-link to="/main/rackData">
                  <i class="fa fa-circle-o"></i> 货架详情
                </router-link>
              </li>

              <li id="rack-add" :class="{'active': this.$route.path==='/main/addRack'}">
                <router-link to="/main/addRack">
                  <i class="fa fa-circle-o"></i> 添加货架
                </router-link>
              </li>
            </ul>
          </li>

          <li class="treeview" :class="{'active': this.$route.type==='io'}">
            <a href="#">
              <i class="fa fa-table"></i> <span>出入库记录管理</span>
              <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
            </a>
            <ul class="treeview-menu">

              <li id="io-data" :class="{'active': this.$route.path==='/main/ioData'}">
                <router-link to="/main/ioData">
                  <i class="fa fa-circle-o"></i> 出入库记录详情
                </router-link>
              </li>

              <li id="io-add" :class="{'active': this.$route.path==='/main/addIo'}">
                <router-link to="/main/addIo">
                  <i class="fa fa-circle-o"></i> 添加出入库记录
                </router-link>
              </li>
            </ul>
          </li>

          <li class="treeview" :class="{'active': this.$route.type==='vendors'}">
            <a href="#">
              <i class="fa fa-globe"></i> <span>供应商管理</span>
              <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
            </a>
            <ul class="treeview-menu">

              <li id="vendors-data" :class="{'active': this.$route.path==='/main/vendorsData'}">
                <router-link to="/main/vendorsData">
                  <i class="fa fa-circle-o"></i> 供应商详情
                </router-link>
              </li>

              <li id="vendors-add" :class="{'active': this.$route.path==='/main/addVendors'}">
                <router-link to="/main/addVendors">
                  <i class="fa fa-circle-o"></i> 添加供应商
                </router-link>
              </li>
            </ul>
          </li>

          <li class="treeview" :class="{'active': this.$route.type==='user'}">
            <a href="#">
              <i class="fa fa-user"></i> <span>用户管理</span>
              <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
            </a>
            <ul class="treeview-menu">

              <li id="user-data">
                <router-link to="/main/userData" :class="{'active': this.$route.path==='/main/userData'}">
                  <i class="fa fa-circle-o"></i> 用户详情
                </router-link>
              </li>

              <li id="user-add">
                <router-link to="/main/addUser" :class="{'active': this.$route.path==='/main/addUser'}">
                  <i class="fa fa-circle-o"></i> 添加用户
                </router-link>
              </li>
            </ul>
          </li>

          <li id="analysis" :class="{'active': this.$route.path==='/main/analysis'}">
            <router-link to="/main/analysis"><i class="fa fa-pie-chart"></i> <span>数据分析</span></router-link>
          </li>


          <!-- 菜单 /-->

        </ul>
      </section>
      <!-- /.sidebar -->
    </aside>
    <!-- 导航侧栏 /-->
  </div>
</template>

<script>
export default {
  name: "Header",
  data(){
    let userInfo = JSON.parse(localStorage.getItem("repoUserInfo"));
    if(userInfo===null)
      userInfo = JSON.parse(sessionStorage.getItem("repoUserInfo"));
    return {
      username: userInfo.username,
      loginDateTime: userInfo.loginDateTime
    }
  },
  methods:{
    logout(){
      sessionStorage.removeItem("repoUserInfo");
      localStorage.removeItem("repoUserInfo");
      this.$router.replace('/login');
    }
  }
}
</script>

<style scoped>

</style>
